<template>
  <uni-popup ref="billingRules" type="bottom" background-color="reba(240, 242, 248,1)"
             border-radius="50rpx 50rpx 50rpx 50rpx" style="height: 80%" @maskClick="closePopup">
    <view class="show-popup">
      <view class="popup-title">
        <uni-icons type="closeempty" style="position: absolute;right: 20rpx;top: 20rpx" :size="20"
                   @click="closePopup"></uni-icons>
        <view class="label">将欲行包车</view>
        <view class="note">{{ product.name }}｜6人4行李</view>
        <view class="line"></view>
        <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
        ></uni-segmented-control>
      </view>
      <scroll-view class="flex-item" :scroll-y="true" :scroll-into-view=toview @scroll="cateScroll"
                   :scroll-with-animation="true">
        <uni-card>
          <view id="pro_0" class="explain-unit">
            <view class="label">
              服务保障
            </view>
          </view>
          <view class="explain-uni-card">
            <text class="title" style="background: linear-gradient(to right,#bddafc,#fff);color: #007aff">优质车辆
            </text>
            <view class="explain-uni-card-content">
              <view class="content-title">3年内车龄</view>
              <view class="content-details">当前服务商车辆为提供3年内车龄的车辆。</view>
              <view class="content-title">WIFI</view>
              <view class="content-details">当前服务商提供车内WIFI，您可免费使用。</view>
              <view class="content-title">雨伞</view>
              <view class="content-details">当前服务商提供雨伞，您可免费使用。</view>
            </view>
          </view>
          <view class="explain-uni-card">
            <text class="title" style="background: linear-gradient(to right,#fee9e0,#fff);color: #6a3113">甄选司机
            </text>
            <view class="explain-uni-card-content">
              <view class="content-title">5年以上驾龄</view>
              <view class="content-details">司机驾龄在5年以上，驾驶经验丰富。</view>
              <view class="content-title">WIFI</view>
              <view class="content-details">当前服务商提供车内WIFI，您可免费使用。</view>
              <view class="content-title">雨伞</view>
              <view class="content-details">当前服务商提供雨伞，您可免费使用。</view>
            </view>
          </view>
        </uni-card>
        <uni-card>
          <view id="pro_1" class="explain-unit">
            <view class="label">
              预定须知
            </view>
          </view>
          <view class="billing-rules">
            <view class="rule-label">
              用车流程
            </view>
            <view class="explain-uni-card content-details"
                  style="padding: 20rpx;align-items: center;text-align: center">
              <uni-row>
                <uni-col :span="4">
                  <img src="../../../static/images2/order-success.png" style="height: 50rpx;width: 50rpx"/>
                  <view>下单付款</view>
                </uni-col>
                <uni-col :span="1">></uni-col>
                <uni-col :span="4">
                  <image src="../../../static/images2/notice.png" style="height: 50rpx;width: 50rpx"/>
                  <view>司机接单</view>
                  <view>通知乘客</view>
                </uni-col>
                <uni-col :span="1">></uni-col>
                <uni-col :span="4">
                  <image src="../../../static/images2/contact.png" style="height: 50rpx;width: 50rpx"/>
                  <view>司机联系</view>
                  <view>沟通行程</view>
                </uni-col>
                <uni-col :span="1">></uni-col>
                <uni-col :span="4">
                  <image src="../../../static/images2/pick-up-car.png" style="height: 50rpx;width: 50rpx"/>
                  <view>准时接驾</view>
                  <view>出发</view>
                </uni-col>
                <uni-col :span="1">></uni-col>
                <uni-col :span="4">
                  <image src="../../../static/images2/car-success.png" style="height: 50rpx;width: 50rpx"/>
                  <view>行程结束</view>
                </uni-col>
              </uni-row>
            </view>
          </view>
          <view class="billing-rules">
            <view class="rule-label">
              等待说明
            </view>
            <view class="content-details">
              司机到达约定地点后,可免费等待
              <text class="popup-link">30分钟</text>
              ，之后开始计算用车时间
            </view>
          </view>
          <view class="billing-rules">
            <view class="rule-label">
              退改说明
            </view>
            <view class="content-details">
              当地时间
              <text class="popup-link">2024-07-15 17:24</text>
              之前可免费取消;超时将扣除订单
              金额的
              <text class="popup-link">100%</text>
            </view>
          </view>
          <view class="billing-rules">
            <view class="rule-label">
              确认说明
            </view>
            <view class="content-details">
              该供应商在下单后立即确认
            </view>
          </view>
          <view class="billing-rules">
            <view class="rule-label">
              未成年人信息授权
            </view>
            <view class="content-details">
              提交订单即表示您已阅读并接受以下声明:如果订单信息中包含未成年人信息，则您作为订单中未成年人的监护人(或已征得该未成年人监护人的同意)，有权使用该未成年人信息提交订单，同意平台为提供产品或服务的目的，处理未成年人的个人信息。
            </view>
          </view>
        </uni-card>
        <uni-card>
          <view id="pro_2" class="explain-unit">
            <view class="label">
              计费规则
            </view>
          </view>
          <view class="billing-rules">
            <view class="rule-label">
              <uni-row>
                <uni-col :span="6">总额</uni-col>
              </uni-row>
            </view>
            <view class="rule-label">
              <uni-row>
                <uni-col :span="6">基础包车费</uni-col>
                <uni-col :span="4" :offset="14">¥{{ basicFee }}</uni-col>
              </uni-row>
            </view>
            <view class="rule-label">
              <text class="content-details">8小时100公里</text>
            </view>
            <view class="rule-label">
              <view class="title">总额包含
              </view>
              <view class="explain-uni-card">
                <view class="rule-label">
                  <uni-row>
                    <uni-col :span="10" :offset="2">
                      <uni-icons type="checkmarkempty" size="" class="icon"/>
                      车辆使用费
                    </uni-col>
                    <uni-col :span="10" :offset="2">
                      <uni-icons type="checkmarkempty" size="" class="icon"/>
                      燃油费
                    </uni-col>
                  </uni-row>
                </view>
                <view class="rule-label">
                  <uni-row>
                    <uni-col :span="10" :offset="2">
                      <uni-icons type="checkmarkempty" size="" class="icon"/>
                      司机餐食费
                    </uni-col>
                    <uni-col :span="10" :offset="2">
                      <uni-icons type="checkmarkempty" size="" class="icon"/>
                      司机服务费
                    </uni-col>
                  </uni-row>
                </view>
              </view>
            </view>
            <view class="rule-label">
              <view class="title">套餐费用不包含
              </view>
              <view class="explain-uni-card">
                <view style="padding:0 30rpx">
                  <view class="rule-label">
                    停车费、路桥费、多日包车司机住宿费等
                    <view class="content-details">
                      停车费（仅限司机按照乘客要求停车产生的费用）、高速费、路桥费、多日包车司机住宿费（仅限司机按照乘客要求跨域过夜时产生的费用，上线350元/晚）等-->
                      在套餐费用包含中未说明的费用项目，按行驶过程中司机世纪垫付的费用收取，第三方费用请向收费方索要报销凭证。
                    </view>
                  </view>
                  <view class="rule-label">
                    超时长费 ¥25/半小时
                    <view class="content-details">
                      超出套餐所含时长后，乘客如继续用车需支付超时长费，半小时为最小计量单位，不足半小时的按半小时计费
                    </view>
                  </view>
                  <view class="rule-label">
                    超公里费 ¥5/半小时
                    <view class="content-details">
                      超出套餐所含公里后，乘客如继续用车需支付超公里费，超出不分不足1公里按照1公里计费
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="">
            </view>
          </view>
        </uni-card>
        <uni-card>
          <view id="pro_3" class="explain-unit">
            <view class="label">
              发票说明
            </view>
          </view>
          <view class="billing-rules">
            <view class="rule-label">
              <view class="title">
                开发票说明
              </view>
              <view class="content-details">
                1.用车中如产生额外费用，请在司机慎写后
                <text style="color: #E6A23C">线上支付</text>
                ，否则会导致发票金额不全。
              </view>
              <view class="content-details">
                2.停车费、高速费、过路过桥费、司机住宿费等其他第三方收费的费用，不包含用车服务提供方开票范围内，
                <text style="color: #E6A23C">请及时向第三方索要发票。</text>
              </view>
            </view>
          </view>
          <view class="billing-rules">
            <view class="rule-label">
              开票流程
            </view>
            <view class="explain-uni-card content-details"
                  style="padding: 20rpx;align-items: center;text-align: center">
              <uni-row>
                <uni-col :span="5">
                  <img src="../../../static/images2/orderEnd.png" style="height: 50rpx;width: 50rpx"/>
                  <view>用车结束后至订单详情</view>
                </uni-col>
                <uni-col :span="1">></uni-col>
                <uni-col :span="5">
                  <image src="../../../static/images2/otherPay.png" style="height: 50rpx;width: 50rpx"/>
                  <view>诺有额外费用线上支付</view>
                </uni-col>
                <uni-col :span="1">></uni-col>
                <uni-col :span="5">
                  <image src="../../../static/images2/invoiceInfo.png" style="height: 50rpx;width: 50rpx"/>
                  <view>填写开票信息</view>
                </uni-col>
                <uni-col :span="1">></uni-col>
                <uni-col :span="5">
                  <image src="../../../static/images2/waitEmail.png" style="height: 50rpx;width: 50rpx"/>
                  <view>24小时内发至邮箱</view>
                </uni-col>
              </uni-row>
            </view>
          </view>
          <view class="billing-rules">
            <view class="rule-label">
              如何开发票
            </view>
            <text class="content-details">
              您可以在行程结束后，在订单详情页点击开发票，填写开票信息，发票将在24小时内发送至您的邮箱。
            </text>
          </view>
          <view class="billing-rules">
            <view class="rule-label">
              由谁开发票
            </view>
            <text class="content-details">
              <view class="rule-label">1.用车服务提供方:</view>
              <text>
                用车服务费由实际服务提供方开具发票，主要包含基础包车费及行程中线上支付的额外费用(超时长、超公里费用、变更目的地额外增加费用)。
              </text>
            </text>
            <text class="content-details">
              <view class="rule-label">2.第三方费用收取方:</view>
              <text>
                第三方收取的费用由第三方费用收取方开具发票，主要包含停车费、高速费、过路过桥费、司机住宿费等其他费用。
              </text>
            </text>
          </view>
          <view class="billing-rules">
            <view class="rule-label">
              开票范围
            </view>
            <text class="content-details">
              发票金额不含红包、优惠券、超级会员权益、礼品卡支付的部分。信用付订单实际开票金额以最终订单支付金额为准。
            </text>
          </view>
        </uni-card>
        <uni-card>
          <view id="pro_4" class="explain-unit">
            <view class="label">
              用户评价
            </view>
            <view class="comments">
              <uni-row class="row-height">
                <uni-col :span="10">
                  <uni-rate :readonly="true" :value="score"/>
                </uni-col>
                <uni-col :span="4">{{ score }}分</uni-col>
                <uni-col :span="10">
                  <uni-tag :circle="true" :inverted="tagChose.inverted[0]" text="差评" type="primary" class="tag"
                           @click="tagClick(0)"/>
                  <uni-tag :circle="true" :inverted="tagChose.inverted[1]" text="中评" type="primary" class="tag"
                           @click="tagClick(1)"/>
                  <uni-tag :circle="true" :inverted="tagChose.inverted[2]" text="好评" type="primary" class="tag"
                           @click="tagClick(2)"/>
                </uni-col>
              </uni-row>
              <view class="row-height">

              </view>
            </view>
            <piaoyi-commentList :apprises="apprises">
            </piaoyi-commentList>
            <uni-load-more color="#007AFF" :status="status" @clickLoadMore="nextComment"/>
          </view>
        </uni-card>
      </scroll-view>
    </view>
  </uni-popup>
</template>

<script>
import {queryCommentList, queryScore} from "@/utils/api/basics";

export default {
  props: ['product', 'basicFee'],
  data() {
    return {
      score: 0,
      tagChose: {
        inverted: [false, false, false],
        lastChoseIndex: -1
      },
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        moreScore: undefined,
        lessScore: undefined
      },
      status: 'nomore',
      apprises: [{
        avatarUrl: '', //头像
        name: '小红', //昵称
        commentStar: 5, //评分
        commentDate: '2023-06-09 15:00:00', //时间
        teachLevel: '一段简介', //描述简介
        appraises: ['认真敬业', '场地好', '热情周到'] // 标签
      }, {
        avatarUrl: '',
        name: '小明',
        commentStar: 5,
        commentDate: '2023-06-09 15:00:00',
        teachLevel: '一段简介',
        appraises: ['认真敬业', '场地好', '热情周到']
      }, {
        avatarUrl: '',
        name: '小黑',
        commentStar: 5,
        commentDate: '2023-06-09 15:00:00',
        teachLevel: '一段简介',
        appraises: ['认真敬业', '场地好', '热情周到']
      }, {
        avatarUrl: '',
        name: '小红',
        commentStar: 5,
        commentDate: '2023-06-09 15:00:00',
        teachLevel: '一段简介',
        appraises: ['认真敬业', '场地好', '热情周到']
      }, {
        avatarUrl: '',
        name: '小明',
        commentStar: 5,
        commentDate: '2023-06-09 15:00:00',
        teachLevel: '一段简介',
        appraises: ['认真敬业', '场地好', '热情周到']
      }, {
        avatarUrl: '',
        name: '小黑',
        commentStar: 5,
        commentDate: '2023-06-09 15:00:00',
        teachLevel: '一段简介',
        appraises: ['认真敬业', '场地好', '热情周到']
      }],
      toview: '',
      current: 0,
      items: ['行前必读', '计费规则', '发票说明', '用户评价'],
    };
  }, methods: {
    nextComment() {
      let pageTotal = this.page.total / this.page.pageSize
      if (this.page.pageNum < pageTotal) {
        this.page.pageNum = this.page.pageNum + 1
        if (this.page.pageNum < pageTotal) {
          this.status = 'more'
        } else {
          this.status = 'nomore'
        }
        this.findComment()
      } else {
        this.status = 'nomore'
      }

    },
    init() {
      // 平均评分
      queryScore({
        bid: this.product.sid
      }).then(res => {
        if (res.data.code == 200) {
          this.score = res.data.totalScore.toFixed(1)
        }
      })
      this.apprises = []
      this.findComment()
    },
    findComment() {
      let query = {
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
        bid: this.product.sid
      }
      if (this.page.moreScore != undefined) {
        query.moreScore = this.page.moreScore
      }
      if (this.page.lessScore != undefined) {
        query.lessScore = this.page.lessScore
      }
      queryCommentList(query).then(res => {
        if (res.data.code === 200) {
          let imgPre = getApp().globalData.imgUrl
          let commentList = res.data.rows
          this.page.total = res.data.total
          for (let i = 0; i < commentList.length; i++) {
            let arrImage = commentList[i].contentPic.split(',')
            let arrImageShow = []
            for (let j = 0; j < arrImage.length; j++) {
              arrImageShow.push(imgPre + arrImage[j])
            }
            this.apprises.push({
              name: commentList[i].nickname,
              commentStar: commentList[i].score,
              commentDate: commentList[i].addTime,
              teachLevel: commentList[i].content,
              commentImg: arrImageShow
            })
          }
        }
      })
    },
    tagClick(index) {
      this.apprises = []
      if (this.tagChose.lastChoseIndex === index) {
        this.tagChose.inverted[index] = false
        this.tagChose.lastChoseIndex = -1
        this.page.pageNum = 1
        this.page.lessScore = undefined
        this.page.moreScore = undefined
        this.findComment()
      } else {
        switch (index) {
          case 0:
            this.page.lessScore = 2.5
            this.page.moreScore = undefined
            break
          case 1:
            this.page.moreScore = 2.6
            this.page.lessScore = 3.5
            break
          case 2:
            this.page.lessScore = undefined
            this.page.moreScore = 3.6
            break
        }
        this.findComment()
        this.tagChose.inverted[this.tagChose.lastChoseIndex] = false
        this.tagChose.inverted[index] = true
        this.tagChose.lastChoseIndex = index
      }


    },
    closePopup() {
      this.toview = ''
      this.$refs.billingRules.close()
    },
    open(index) {
      this.init()
      this.$refs.billingRules.open()
      if (index != undefined) {
        this.$nextTick(() => {
          // 通过下标选择tab标签页
          this.switchPageCurrent(index)
          this.toview = 'pro_' + index
        })
      }
    },
    // 更换标签，跳转到滚动到区域
    onClickItem(e) {
      this.current = e.currentIndex
      switch (this.current) {
        case 0:
          this.toview = 'pro_' + 0
          break
        default:
          this.toview = 'pro_' + (e.currentIndex + 1)
      }
    },
    // 监听滚动事件，当滚动到一定区域更换标签
    cateScroll() {
      const query = uni.createSelectorQuery().in(this);
      query.selectAll('.explain-unit').boundingClientRect(data => {
        for (var cate = 0; cate < data.length; cate++) {
          if (data[cate].top < 300 && data[cate].top > 0) {
            this.switchPageCurrent(data, cate);
            // this.toview = data[cate].id;
          }
        }
      }).exec();
    },
    // 选择对应内容
    switchPageCurrent(data, index) {
      switch (index) {
        case 0:
        case 1:
          this.current = 0
          break
        default:
          this.current = index - 1
      }
    }
  }
}
</script>

<style lang="scss">
// 弹框显示
.show-popup {
  position: relative;
  border-radius: 20rpx 20rpx 0 0;
  background-color: #f0f2f8;
  height: 100%;

  .flex-item {
    //flex: 1;
    height: 70vh;
  }

  .popup-title {
    text-align: center;
    border-radius: 20rpx 20rpx 0 0;
    background: linear-gradient(to bottom, #d9f2fc, #fff);
  }
}

.line {
  border-bottom: 1px solid #e0e0e0;
  height: 1px;
  margin: 10rpx
}

.explain-unit {
  padding: 25rpx 0;
  //margin: 25rpx 0;
  font-weight: bold;
  color: #111;
  font-size: 30rpx;

  .label {
    margin: 0;
    border-left: 15rpx solid #5c75ed;
    border-radius: 10rpx 0 0 10rpx;
    padding: 0 0 0 10rpx;
  }
}

.explain-uni-card {
  border-radius: 20rpx;
  font-size: 25rpx;
  border: 1px solid #e0e0e0;
  margin: 25rpx 0 10rpx;

  &-content {
    margin: 20rpx;

    .content-title {
      color: #1f1f1f;
      font-weight: bold;
    }

  }

  .title {
    border-radius: 20rpx 0 0 0;
    margin-top: 2rpx;
    padding: 15rpx 30rpx;
    font-weight: bold;
  }

  &-title {
    font-size: 25rpx;
  }
}

.billing-rules {
  color: #1f1f1f;
  font-size: 30rpx;
  font-weight: bold;

  .rule-label {
    margin: 30rpx 0;
  }

  .title {
    margin: 40rpx 0 0;
  }
}

.content-details {
  margin-top: 15rpx;
  font-weight: initial;
  font-size: 24rpx;
}

.vue-ref {
  height: 80%;
}

.icon {
  margin-right: 10rpx
}

.comments {
  margin: 50rpx auto;

  .row-height {
    margin: 20rpx auto;
  }

  .tag {
    display: inline-block;
    margin: 10rpx 15rpx;
  }
}
</style>
